<!doctype html>
<html lang="en">

	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="../image/favicon.png" type="image/png">
		<title>Royal Hotel</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="../css/bootstrap.css">
		<link rel="stylesheet" href="../vendors/linericon/style.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css">
		<link rel="stylesheet" href="../vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.css">
		<link rel="stylesheet" href="../vendors/nice-select/css/nice-select.css">
		<link rel="stylesheet" href="../vendors/owl-carousel/owl.carousel.min.css">
		<link rel="stylesheet" href="../vendors/lightbox/simpleLightbox.css">
		<!-- main css -->
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../css/responsive.css">
		<!--login-->
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<link href="../css/style1.css" type="text/css" rel="stylesheet" media="all">
		<link rel="stylesheet" href="../css/font-awesome.css">
		<link href="../css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	</head>

	<body>
		<!--================Header Area =================-->
		
		<script src="js/head.js"></script>
		
		   <!-- login form popup-->

	<div id="small-dialog" class="mfp-hide book-form">

		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Login to your site</h3>
				<span class="fa fa-lock"></span>
				<div class="clear"></div>
				<div class="login-agileits-top"> 	
					<form action="#" method="post"> 
						<input type="text" class="name" name="user name" Placeholder="Username" required=""/>
						<input type="password" class="password" name="Password" Placeholder="Password" required=""/>
						<input type="submit" value="Login"> 
					</form> 	
				</div> 
				<div class="login-agileits-bottom"> 
					<h6><a href="../#">Forgot password?</a></h6>
				</div> 
			</div>  
		</div> 
		
	</div>  

<!-- //login form popup-->

<!-- subscribe form popup-->
<div class="pop-up"> 
	<div id="small-dialog1" class="mfp-hide book-form">

		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Be the first to hear</h3>
				<p>Sign up to get notified about latest offers, news and events. Stay tuned!</p>
				<div class="clear"></div>
				<div class="login-agileits-top"> 	
					<form action="#" method="post"> 
						<input type="text" class="name" name="name" Placeholder="Full Name" required=""/>
						<input type="email" class="email" name="email" Placeholder="Email" required=""/>
						<input type="submit" value="Get Notified"> 
					</form> 	
				</div>
			</div>  
		</div> 
		
	</div>  
</div>
<!-- //subscribe form popup-->

<!-- register form popup-->
<div class="pop-up"> 
	<div id="small-dialog2" class="mfp-hide book-form">
	
		<div class="login-form login-form-left"> 
			<div class="agile-row">
				<h3>Register form</h3>
				<div class="login-agileits-top"> 	
					<form action="#" method="post"> 
						<input type="text" class="name" name="name" Placeholder="Full Name" required=""/>
						<input type="text" class="phone" name="phone" Placeholder="Phone Number" required=""/>
						<input type="password" class="password" name="password" Placeholder="Password" required=""/>
						<div class="login-check">
							<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i> I Accept to the <a href="../#">Terms &amp; Conditions</a></label>
						</div>
						<input type="submit" value="Register"> 
					</form> 	
				</div>
			</div>
		</div>
		
	</div>
</div>
        
		
		
		
		
		
		<!--================Header Area =================-->

		<!--================Breadcrumb Area =================-->
		<section class="breadcrumb_area">
			<div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
			<div class="container">
				<div class="page-cover text-center">
					<h2 class="page-cover-tittle">Gallery</h2>
					<ol class="breadcrumb">
						<li>
							<a href="../index.html">Home</a>
						</li>
						<li class="active">Gallery</li>
					</ol>
				</div>
			</div>
		</section>
		<!--================Breadcrumb Area =================-->

		<!--================Breadcrumb Area =================-->
		<section class="gallery_area section_gap">
			<div class="container">
				<div class="section_title text-center">
					<h2 class="title_color">Royal Hotel Gallery</h2>
					<p>Who are in extremely love with eco friendly system.</p>
				</div>
				<div class="row imageGallery1" id="gallery">
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/01.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/01.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/02.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/02.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/03.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/03.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/04.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/04.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>

					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/06.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/05.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/05.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/06.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/01-1.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/01-1.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/02-1.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/02-1.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
					<div class="col-md-4 gallery_item">
						<div class="gallery_img">
							<img src="image/gallery/03-1.jpg" alt="">
							<div class="hover">
								<a class="light" href="../image/gallery/03-1.jpg"><i class="fa fa-expand"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--================Breadcrumb Area =================-->

		<!--================ start footer Area  =================-->
		<footer class="footer-area section_gap">
			<div class="container">
				<div class="row">
					<div class="col-lg-3  col-md-6 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="footer_title">About Agency</h6>
							<p>The world has become so fast paced that people don’t want to stand by reading a page of information, they would much rather look at a presentation and understand the message. It has come to a point </p>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="footer_title">Navigation Links</h6>
							<div class="row">
								<div class="col-4">
									<ul class="list_style">
										<li>
											<a href="../#">Home</a>
										</li>
										<li>
											<a href="../#">Feature</a>
										</li>
										<li>
											<a href="../#">Services</a>
										</li>
										<li>
											<a href="../#">Portfolio</a>
										</li>
									</ul>
								</div>
								<div class="col-4">
									<ul class="list_style">
										<li>
											<a href="../#">Team</a>
										</li>
										<li>
											<a href="../#">Pricing</a>
										</li>
										<li>
											<a href="../#">Blog</a>
										</li>
										<li>
											<a href="../#">Contact</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="footer_title">Newsletter</h6>
							<p>For business professionals caught between high OEM price and mediocre print and graphic output, </p>
							<div id="mc_embed_signup">
								<form target="_blank" action="#/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01" method="get" class="subscribe_form relative">
									<div class="input-group d-flex flex-row">
										<input name="EMAIL" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address '" required="" type="email">
										<button class="btn sub-btn"><span class="lnr lnr-location"></span></button>
									</div>
									<div class="mt-10 info"></div>
								</form>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget instafeed">
							<h6 class="footer_title">InstaFeed</h6>
							<ul class="list_style instafeed d-flex flex-wrap">
								<li><img src="image/instagram/Image-01.jpg" alt=""></li>
								<li><img src="image/instagram/Image-02.jpg" alt=""></li>
								<li><img src="image/instagram/Image-03.jpg" alt=""></li>
								<li><img src="image/instagram/Image-04.jpg" alt=""></li>
								<li><img src="image/instagram/Image-05.jpg" alt=""></li>
								<li><img src="image/instagram/Image-06.jpg" alt=""></li>
								<li><img src="image/instagram/Image-07.jpg" alt=""></li>
								<li><img src="image/instagram/Image-08.jpg" alt=""></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="border_line"></div>
				<div class="row footer-bottom d-flex justify-content-between align-items-center">
					<p class="col-lg-8 col-sm-12 footer-text m-0">
						Copyright &copy;
						<script>
							document.write(new Date().getFullYear());
						</script> All rights reserved | made with Colorlib - More Templates
						<a href="../http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from
						<a href="../http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
					</p>
					<div class="col-lg-4 col-sm-12 footer-social">
						<a href="../#"><i class="fa fa-facebook"></i></a>
						<a href="../#"><i class="fa fa-twitter"></i></a>
						<a href="../#"><i class="fa fa-dribbble"></i></a>
						<a href="../#"><i class="fa fa-behance"></i></a>
					</div>
				</div>
			</div>
		</footer>
		<!--================ End footer Area  =================-->

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/popper.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
		<script src="js/jquery.ajaxchimp.min.js"></script>
		<script src="vendors/bootstrap-datepicker/bootstrap-datetimepicker.min.js"></script>
		<script src="vendors/nice-select/js/jquery.nice-select.js"></script>
		<script src="js/mail-script.js"></script>
		<script src="js/stellar.js"></script>
		<script src="vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>
		<script src="vendors/isotope/isotope-min.js"></script>
		<script src="js/stellar.js"></script>
		<script src="vendors/lightbox/simpleLightbox.min.js"></script>
		<script src="js/custom.js"></script>
		<!--popup-js-->
		<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
		<script>
			$(document).ready(function() {
				$('.popup-with-zoom-anim').magnificPopup({
					type: 'inline',
					fixedContentPos: false,
					fixedBgPos: true,
					overflowY: 'auto',
					closeBtnInside: true,
					preloader: false,
					midClick: true,
					removalDelay: 300,
					mainClass: 'my-mfp-zoom-in'
				});

			});
		</script>
	</body>

</html>